<template>
  <div>
    <!-- 树形数据 -->
    <!-- data：表格的数据 -->
    <!-- default-expand-all：默认展开所以 -->
    <!-- tree-props：属性结构的配置 -->
    <!-- sortable：排序 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column prop="uid" label="用户ID" width="180"></el-table-column>
      <el-table-column
        prop="nickname"
        label="昵称"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="180"
      ></el-table-column>
      <el-table-column label="注册日期" width="180">
        <template slot-scope="scope">
          <p>{{ scope.row.addtime | formatTime }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    // 自动发请求，获取表格的数据
    this.getTableData();
  },
  methods: {
    getTableData() {
      this.$http
        .get("/memberlist")
        .then((res) => {
          // 给表格赋值
          this.tableData = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>